import React, { Component, Fragment } from "react";
// 导入底部文件
import { Banner, Container, Left, Right, BackToTop } from './style'
// 让content链接store
import { connect } from 'react-redux'
import { actionCreators } from "./store";
import TopicList from "./Components/TopicList";
import NewsList from "./Components/NewsList";
import ImgList from "./Components/ImgList";
import WriteList from "./Components/WriteList";
class Content extends Component {
  render() {
    return (
      <Fragment>
        <Container>
          <Left>
            <Banner></Banner>
            <TopicList></TopicList>
            <NewsList></NewsList>
          </Left>
          <Right>
            <ImgList></ImgList>
            <WriteList></WriteList>
          </Right>
        </Container>
        {
          this.props.scrollShow ? (<BackToTop onClick={() => this.handleBackTop()}><span>返回顶部</span></BackToTop>) : null
        }
      </Fragment>
    )
  }
  componentDidMount() {
    this.props.getTopList()
    this.bindEvents()
  }
  bindEvents() {
    window.addEventListener('scroll', this.props.handleScrollChange)
  }
  handleBackTop() {  // 点击返回顶部
    window.scrollTo(0, 0);
  }
  componentWillUnmount() { //组件卸载时，删除事件绑定
    window.removeEventListener('scroll', this.props.handleScrollChange)
  }
}

const mapState = (state) => ({
  scrollShow: state.getIn(['content', 'scrollShow'])
})

const mapDispatch = (dispatch) => ({
  getTopList() {
    dispatch(actionCreators.getInitTopList())
  },
  handleScrollChange() {
    if (document.documentElement.scrollTop > 160) {
      dispatch(actionCreators.changeScroll(true))
    } else {
      dispatch(actionCreators.changeScroll(false))
    }
  }
})

export default connect(mapState, mapDispatch)(Content)